import type { FC, ReactNode } from 'react'
import classNames from 'classnames'
import { NativeProps, withNativeProps } from '../../utils/native-props'

const classPrefix = 'rt-divider'

export type DividerProps = {
  /** 内容位置，仅在 direction === 'horizontal' 时有效. default: `center` */
  contentPosition?: 'left' | 'right' | 'center'
  /** 分割线类型-水平还是垂直. default: 'horizontal' */
  direction?: 'horizontal' | 'vertical'
  /** children. */
  children?: ReactNode
} & NativeProps<
  /** 文字颜色. default: 'var(--rt-color-weak)'. globaVariable: '--divider-content-color' */
  | '--content-color'
  /** 线条颜色. default: 'var(--rt-color-border)'. globaVariable: '--divider-border-color' */
  | '--border-color'
>

export const Divider: FC<DividerProps> = (props) => {
  const {
    contentPosition = 'center',
    direction = 'horizontal',
    children,
  } = props
  return withNativeProps(
    props,
    <div
      className={classNames(
        classPrefix,
        `${classPrefix}-${direction}`,
        `${classPrefix}-${contentPosition}`,
      )}
    >
      {children && (
        <div className={`${classPrefix}-content`}>{children}</div>
      )}
    </div>,
  )
}
